<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="林镭特">
    <title></title>
    <style>
        body{
            background-color: gainsboro;
        }
        *{
            margin: 0;
            padding: 0;
        }
        main{
            width: 390px;
            margin: 0 auto;
            background-color: white;
            /* overflow: hidden; */
        }
        .up{
            border: 10px solid white;
            transition: all 1s;
        }
        .up:hover{
            border: 10px solid orange;
        }
        .down{
            display: flex;
        }
        .content{
            border: 10px solid white;
            width: 170px;
            height: 170px;
            overflow: hidden;
            position: relative;
        }
        .zhegai{
            position: absolute;
            background-color: rgba(0, 0, 0, 0.3);
            color: white;
            width: 170px;
            
            height: 170px;
            /* display: none; */
            left: -170px;
            
        }
    </style>
</head>
<body>
    <main>
        <div class="up">
            <img src="img/1-1.jpg" alt="">
            问是否会对速度快圣诞快乐就发收到了开发建设路口的解放路时代峻峰SDK浪费绝对是离开的空间和水电费粉红色的客户的反馈几乎是丢官方跟别人讲和
        </div>
        <div class="down">
            <div class="content">
                <div class="zhegai">我浮动浮动可理解和地方搜is大佛if还是司法所都你放里看</div>
                <img src="img/2-2.jpg" alt="">
                
            </div>
            <div class="content">
                <div class="zhegai">粉红色的华东师范邯郸市科技发货的时刻将发挥水电费圣诞节快乐发货的金石可镂返回</div>
                <img src="img/3-3.jpg" alt="">
            </div>
        </div>
    </main>
    <script src="jQuery.js"></script>
<script>
     $(".content").hover(function(){
        $(this).find(".zhegai").stop().animate({
         left:0
        },200); 
    },function(){
        $(this).find(".zhegai").stop().animate({
            left:-170
        },200); 
    });
</script>
</body>
</html>